<template>
  <div class="app-container">
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧树形结构 -->
      <div class="left-sidebar">
        <el-card class="tree-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">监控区域</span>
              <div class="card-actions">
                <el-button type="primary" link @click="refreshTree">
                  <el-icon>
                    <Refresh />
                  </el-icon>
                </el-button>
                <!-- <el-button type="primary" link @click="expandAll">
                  <el-icon>
                    <Expand />
                  </el-icon>
                </el-button>
                <el-button type="primary" link @click="collapseAll">
                  <el-icon>
                    <Fold />
                  </el-icon>
                </el-button> -->
              </div>
            </div>
          </template>

          <div class="tree-search">
            <el-input v-model="treeFilterText" placeholder="搜索区域/站点" clearable prefix-icon="Search" />
          </div>

          <div class="tree-container">
            <el-tree ref="treeRef" :data="areaTreeData" :props="treeProps" :filter-node-method="filterNode"
              :expand-on-click-node="false" node-key="id" default-expand-all highlight-current
              @node-click="handleNodeClick">
              <template #default="{ node, data }">
                <div class="custom-tree-node">
                  <div class="node-content">
                    <el-icon class="node-icon">
                      <component :is="getNodeIcon(data)" />
                    </el-icon>
                    <span class="node-label">{{ data.name }}</span>
                    <span v-if="data.children && data.children.length > 0" class="node-count">
                      ({{ data.children.length }})
                    </span>
                  </div>
                  <div v-if="data.type === 'station'" class="node-status">
                    <el-tag :type="getStationStatusTag(data)" size="small" effect="light">
                      {{ getStationStatusText(data) }}
                    </el-tag>
                  </div>
                </div>
              </template>
            </el-tree>
          </div>
        </el-card>
      </div>

      <!-- 右侧内容区域 -->
      <div class="right-content">
        <!-- 摄像头列表 -->
        <el-card class="camera-list-card" v-if="currentCameras.length > 0">
          <template #header>
            <div class="card-header">
              <span class="card-title">摄像头列表</span>
              <div class="card-actions">
                <el-select v-model="viewMode" placeholder="视图模式" style="width: 120px">
                  <el-option label="网格视图" value="grid" />
                  <el-option label="列表视图" value="list" />
                </el-select>
                <el-select v-model="filterStatus" placeholder="状态筛选" clearable style="width: 120px; margin-left: 10px">
                  <el-option label="在线" :value="1" />
                  <el-option label="离线" :value="0" />
                </el-select>
              </div>
            </div>
          </template>

          <!-- 网格视图 -->
          <div v-if="viewMode === 'grid'" class="camera-grid">
            <div v-for="camera in filteredCameras" :key="camera.cameraId" class="camera-card"
              :class="{ 'camera-offline': camera.onlineStatus === 0 }">
              <div class="camera-header">
                <div class="camera-info">
                  <h4 class="camera-name">{{ camera.cameraName }}</h4>
                  <div class="camera-meta">
                    <el-tag :type="camera.onlineStatus === 1 ? 'success' : 'danger'" size="small">
                      {{ camera.onlineStatus === 1 ? '在线' : '离线' }}
                    </el-tag>
                    <span class="camera-pos">{{ camera.installPos }}</span>
                  </div>
                </div>
                <div class="camera-actions">
                  <el-button type="primary" link size="small" @click="handlePlayLive(camera)"
                    :disabled="camera.onlineStatus === 0">
                    <el-icon>
                      <VideoPlay />
                    </el-icon>
                    直播
                  </el-button>
                  <el-button type="info" link size="small" @click="handleViewDetail(camera)">
                    <el-icon>
                      <View />
                    </el-icon>
                    详情
                  </el-button>
                </div>
              </div>

              <div class="video-container">
                <!-- 视频播放区域 -->
                <div class="video-placeholder" v-if="camera.onlineStatus === 0">
                  <el-icon class="offline-icon">
                    <VideoCamera />
                  </el-icon>
                  <p>摄像头离线</p>
                </div>
                <div v-else class="live-video">
                  <img :src="getCameraThumbnail(camera)" alt="实时画面" class="video-thumbnail"
                    @click="handlePlayLive(camera)" />
                  <div class="video-overlay">
                    <el-button type="primary" circle size="small" @click="handlePlayLive(camera)">
                      <el-icon>
                        <VideoPlay />
                      </el-icon>
                    </el-button>
                  </div>
                </div>
              </div>

              <div class="camera-footer">
                <div class="camera-specs">
                  <span class="spec-item">
                    <el-icon>
                      <Monitor />
                    </el-icon>
                    {{ camera.resolution || '1920x1080' }}
                  </span>
                </div>
                <div class="camera-time">
                  {{ formatTime(camera.updateTime) }}
                </div>
              </div>
            </div>
          </div>

          <!-- 列表视图 -->
          <div v-else class="camera-list">
            <el-table :data="filteredCameras" style="width: 100%" @row-click="handleCameraRowClick">
              <el-table-column prop="cameraName" label="摄像头名称" min-width="150">
                <template #default="{ row }">
                  <div class="camera-name-cell">
                    <el-icon class="camera-icon">
                      <VideoCamera />
                    </el-icon>
                    <span>{{ row.cameraName }}</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="installPos" label="安装位置" min-width="120" />

              <el-table-column prop="onlineStatus" label="状态" width="80">
                <template #default="{ row }">
                  <el-tag :type="row.onlineStatus === 1 ? 'success' : 'danger'" size="small">
                    {{ row.onlineStatus === 1 ? '在线' : '离线' }}
                  </el-tag>
                </template>
              </el-table-column>

              <el-table-column prop="resolution" label="分辨率" width="100" />

              <el-table-column prop="ptzSupport" label="云台" width="60">
                <template #default="{ row }">
                  <el-tag v-if="row.ptzSupport === 1" type="success" size="small">
                    支持
                  </el-tag>
                  <span v-else>-</span>
                </template>
              </el-table-column>

              <el-table-column prop="deviceCode" label="设备编号" width="120" />

              <el-table-column label="操作" width="150" fixed="right">
                <template #default="{ row }">
                  <el-button type="primary" link size="small" @click="handlePlayLive(row)"
                    :disabled="row.onlineStatus === 0">
                    直播
                  </el-button>
                  <el-button type="info" link size="small" @click="handleViewDetail(row)">
                    详情
                  </el-button>
                  <el-button type="warning" link size="small" @click="handleViewHistory(row)">
                    回放
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>

        <!-- 空状态 -->
        <el-card v-else class="empty-card">
          <div class="empty-content">
            <el-empty description="请选择区域或站点查看摄像头" :image-size="200" />
          </div>
        </el-card>
      </div>
    </div>

    <!-- 视频播放对话框 -->
    <el-dialog v-model="videoDialogVisible" :title="videoDialogTitle" width="90%" top="5vh"
      :before-close="handleCloseVideoDialog">
      <div v-if="currentCamera" class="video-player-container">
        <div class="video-player">
          <!-- 实际项目中这里会集成视频播放器 -->
          <div class="video-player-placeholder">
            <div class="player-header">
              <h3>{{ currentCamera.cameraName }}</h3>
              <div class="player-controls">
                <el-button-group>
                  <el-button type="primary" :icon="VideoPlay" @click="togglePlay">
                    {{ isPlaying ? '暂停' : '播放' }}
                  </el-button>
                  <el-button type="info" :icon="FullScreen" @click="toggleFullscreen">
                    全屏
                  </el-button>
                  <el-button type="warning" :icon="VideoPause" @click="handleSnapshot">
                    截图
                  </el-button>
                </el-button-group>
                <el-select v-model="selectedStream" placeholder="选择码流" style="width: 150px; margin-left: 10px">
                  <el-option v-for="stream in cameraStreams" :key="stream.id" :label="stream.label"
                    :value="stream.id" />
                </el-select>
              </div>
            </div>

            <div class="video-content">
              <div class="video-screen">
                <div class="video-item">
                  <!-- 这里应该是实际的视频播放器 -->
                  <video-player :src="getVideoUrl" class="video-player-element" controls :loop="true" :volume="0.6" />
                </div>
                <div class="video-info-overlay">
                  <div class="info-item">
                    <span class="label">摄像头:</span>
                    <span class="value">{{ currentCamera.cameraName }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">位置:</span>
                    <span class="value">{{ currentCamera.installPos }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">状态:</span>
                    <el-tag :type="currentCamera.onlineStatus === 1 ? 'success' : 'danger'" size="small">
                      {{ currentCamera.onlineStatus === 1 ? '在线' : '离线' }}
                    </el-tag>
                  </div>
                  <div class="info-item">
                    <span class="label">时间:</span>
                    <span class="value">{{ currentTime }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <el-button @click="handleCloseVideoDialog">关闭</el-button>
        <el-button type="primary" @click="handleFullScreen">全屏播放</el-button>
      </template>
    </el-dialog>

    <!-- 摄像头详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="摄像头详情" width="600px" :before-close="handleCloseDetailDialog">
      <div v-if="currentCameraDetail" class="camera-detail">
        <el-descriptions title="基本信息" :column="1" border>
          <el-descriptions-item label="摄像头ID">
            {{ currentCameraDetail.cameraId || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="摄像头名称">
            {{ currentCameraDetail.cameraName || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="安装位置">
            {{ currentCameraDetail.installPos || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="在线状态">
            <el-tag :type="currentCameraDetail.onlineStatus === 1 ? 'success' : 'danger'" size="small">
              {{ currentCameraDetail.onlineStatus === 1 ? '在线' : '离线' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="分辨率">
            {{ currentCameraDetail.resolution || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="云台支持">
            <el-tag :type="currentCameraDetail.ptzSupport === 1 ? 'success' : 'info'" size="small">
              {{ currentCameraDetail.ptzSupport === 1 ? '支持' : '不支持' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="设备编号">
            {{ currentCameraDetail.deviceCode || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ formatDateTime(currentCameraDetail.createTime) || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ formatDateTime(currentCameraDetail.updateTime) || '-' }}
          </el-descriptions-item>
        </el-descriptions>

        <div v-if="cameraStreams.length > 0" class="streams-section">
          <h4 class="section-title">可用码流</h4>
          <el-table :data="cameraStreams" size="small">
            <el-table-column prop="label" label="清晰度" width="100" />
            <el-table-column prop="protocol" label="协议" width="100">
              <template #default="{ row }">
                {{ getProtocolText(row.protocol) }}
              </template>
            </el-table-column>
            <el-table-column prop="streamKey" label="流密钥" />
            <el-table-column prop="isDefault" label="默认" width="60">
              <template #default="{ row }">
                <el-tag v-if="row.isDefault === 1" type="success" size="small">
                  是
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <template #footer>
        <el-button @click="handleCloseDetailDialog">关闭</el-button>
        <el-button type="primary" @click="handlePlayLive(currentCameraDetail)"
          :disabled="!currentCameraDetail || currentCameraDetail.onlineStatus === 0">
          播放视频
        </el-button>
      </template>
    </el-dialog>

    <!-- 历史回放对话框 -->
    <el-dialog v-model="historyDialogVisible" title="历史视频回放" width="800px" :before-close="handleCloseHistoryDialog">
      <div v-if="currentCamera" class="history-playback">
        <div class="history-filter">
          <el-form :inline="true" :model="historyFilter">
            <el-form-item label="开始时间">
              <el-date-picker v-model="historyFilter.startTime" type="datetime" placeholder="选择开始时间"
                value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker v-model="historyFilter.endTime" type="datetime" placeholder="选择结束时间"
                value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearchHistory">查询</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="history-list">
          <el-table :data="historyVideos" v-loading="historyLoading">
            <el-table-column prop="videoId" label="视频ID" width="120" />
            <el-table-column prop="startTime" label="开始时间" width="160">
              <template #default="{ row }">
                {{ formatDateTime(row.startTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间" width="160">
              <template #default="{ row }">
                {{ formatDateTime(row.endTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="fileSize" label="文件大小" width="100">
              <template #default="{ row }">
                {{ formatFileSize(row.fileSize) }}
              </template>
            </el-table-column>
            <el-table-column prop="videoFormat" label="格式" width="80" />
            <el-table-column label="操作" width="120">
              <template #default="{ row }">
                <el-button type="primary" link size="small" @click="handlePlayHistory(row)">
                  播放
                </el-button>
                <el-button type="info" link size="small" @click="handleDownloadHistory(row)">
                  下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <template #footer>
        <el-button @click="handleCloseHistoryDialog">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'

// 图标引入
import {
  Refresh,
  Expand,
  Fold,
  Search,
  VideoCamera,
  VideoPlay,
  FullScreen,
  VideoPause,
  Monitor,
  SetUp,
  View,
  ArrowLeft,
  ArrowUp,
  ArrowDown,
  ArrowRight
} from '@element-plus/icons-vue'

// API引入
import {
  getAreaTree,
  getStationsByArea,
  getCamerasByStation,
  getCameraDetail,
  getStreamsByCamera,
  getHistoryVideos
} from '@/api/dispatch/detection/video_monitor'

// 响应式数据
const treeRef = ref(null)
const treeFilterText = ref('')
const areaTreeData = ref([])
const currentCameras = ref([])
const currentCamera = ref(null)
const currentCameraDetail = ref(null)
const cameraStreams = ref([])
const historyVideos = ref([])
const loading = ref(false)
const historyLoading = ref(false)

// 对话框控制
const videoDialogVisible = ref(false)
const detailDialogVisible = ref(false)
const historyDialogVisible = ref(false)

// 视图模式
const viewMode = ref('grid')
const filterStatus = ref('')

// 视频播放状态
const isPlaying = ref(false)
const volume = ref(50)
const selectedStream = ref('')
const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))

// 历史回放筛选
const historyFilter = reactive({
  startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
  endTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
})

// 树形配置
const treeProps = {
  children: 'children',
  label: 'name'
}

// 计算属性
const filteredCameras = computed(() => {
  let cameras = currentCameras.value

  if (filterStatus.value !== '') {
    cameras = cameras.filter(camera => camera.onlineStatus === filterStatus.value)
  }

  return cameras
})

const videoDialogTitle = computed(() => {
  return currentCamera.value ? `${currentCamera.value.cameraName} - 实时监控` : '视频监控'
})

// 初始化数据
onMounted(() => {
  loadAreaTree()
})

// 加载区域树
const loadAreaTree = async () => {
  try {
    loading.value = true
    const res = await getAreaTree()
    areaTreeData.value = transformTreeData(res.data || [])
  } catch (error) {
    console.error('加载区域树失败:', error)
    ElMessage.error('加载区域树失败')
  } finally {
    loading.value = false
  }
}

// 转换树形数据
const transformTreeData = (data) => {
  return data.map(item => {
    const node = {
      ...item,
      type: 'area'
    }

    if (item.children && item.children.length > 0) {
      node.children = transformTreeData(item.children)
    }

    return node
  })
}

// 树节点点击事件
const handleNodeClick = async (data, node) => {
  if (data.type === 'area') {
    // 加载该区域下的站点
    await loadStationsByArea(data.id)
  } else if (data.type === 'station') {
    // 加载该站点的摄像头
    await loadCamerasByStation(data.id)
  }
}

// 根据区域加载站点
const loadStationsByArea = async (areaId) => {
  try {
    const res = await getStationsByArea(areaId)
    // 将站点添加到树中
    const stations = res.data.map(station => ({
      id: station.stationId,
      name: station.stationName,
      type: 'station',
      stationData: station
    }))

    // 更新树节点
    updateTreeNodes(areaId, stations)
  } catch (error) {
    console.error('加载站点失败:', error)
  }
}

// 根据站点加载摄像头
const loadCamerasByStation = async (stationId) => {
  try {
    loading.value = true
    const res = await getCamerasByStation(stationId)
    currentCameras.value = res.data || [];
    console.log(currentCameras.value);

  } catch (error) {
    console.error('加载摄像头失败:', error)
    ElMessage.error('加载摄像头失败')
  } finally {
    loading.value = false
  }
}

const getVideoUrl = computed(() => {
  if (!selectedStream.value) return ''
  return  cameraStreams.value?.find(item => item.id == selectedStream.value)?.urlTemplate ;
})
// 播放实时视频
const handlePlayLive = async (camera) => {
  if (camera.onlineStatus !== 1) {
    ElMessage.warning('摄像头离线，无法播放')
    return
  }

  try {
    currentCamera.value = camera
    // 加载码流列表
    const res = await getStreamsByCamera(camera.cameraId)
    cameraStreams.value = res.data || []
    if (cameraStreams.value.length > 0) {
      selectedStream.value = cameraStreams.value.find(s => s.isDefault == 1)?.id || cameraStreams.value[0].id
    }
    videoDialogVisible.value = true
  } catch (error) {
    console.error('加载码流失败:', error)
    ElMessage.error('加载码流失败')
  }
}

// 查看摄像头详情
const handleViewDetail = async (camera) => {
  try {
    const res = await getCameraDetail(camera.cameraId)
    currentCameraDetail.value = res.data
    
    // 加载码流列表
    const streamRes = await getStreamsByCamera(camera.cameraId)
    if (streamRes.code === 0) {
      cameraStreams.value = streamRes.data || []
    }
    detailDialogVisible.value = true
  } catch (error) {
    console.error('获取摄像头详情失败:', error)
    ElMessage.error('获取摄像头详情失败')
  }
}

// 查看历史回放
const handleViewHistory = async (camera) => {
  currentCamera.value = camera
  historyDialogVisible.value = true
  await handleSearchHistory()
}

// 搜索历史视频
const handleSearchHistory = async () => {
  try {
    historyLoading.value = true
    const params = {
      cameraId: currentCamera.value.cameraId,
      startTime: historyFilter.startTime,
      endTime: historyFilter.endTime
    }

    const res = await getHistoryVideos(params)
    historyVideos.value = res.data || []
  } catch (error) {
    console.error('查询历史视频失败:', error)
    ElMessage.error('查询历史视频失败')
  } finally {
    historyLoading.value = false
  }
}

// 工具函数
const getNodeIcon = (data) => {
  if (data.type === 'station') {
    return 'OfficeBuilding'
  }
  return 'Location'
}

const getStationStatusTag = (station) => {
  // 根据站点的在线摄像头比例确定状态
  const onlineCameras = station.cameras?.filter(c => c.onlineStatus === 1) || []
  const onlineRatio = onlineCameras.length / (station.cameras?.length || 1)

  if (onlineRatio === 0) return 'danger'
  if (onlineRatio < 0.5) return 'warning'
  return 'success'
}

const getStationStatusText = (station) => {
  const onlineCameras = station.cameras?.filter(c => c.onlineStatus === 1) || []
  return `${onlineCameras.length}在线`
}

const getCameraThumbnail = (camera) => {
  // 实际项目中这里会返回真实的缩略图URL
  return `https://via.placeholder.com/300x200/409EFF/ffffff?text=${encodeURIComponent(camera.cameraName)}`
}

const getLiveVideoUrl = (camera) => {
  // 实际项目中这里会返回真实的视频流URL
  return `https://via.placeholder.com/800x450/409EFF/ffffff?text=实时视频流${camera.cameraId}`
}

const getProtocolText = (protocol) => {
  const protocols = {
    1: 'HLS',
    2: 'FLV',
    3: 'RTC',
    4: 'RTSP'
  }
  return protocols[protocol] || '未知'
}

const formatTime = (timeString) => {
  if (!timeString) return '-'
  try {
    return dayjs(timeString).format('MM-DD HH:mm')
  } catch {
    return timeString
  }
}

const formatDateTime = (dateTimeString) => {
  if (!dateTimeString) return '-'
  try {
    return dayjs(dateTimeString).format('YYYY-MM-DD HH:mm:ss')
  } catch {
    return dateTimeString
  }
}

const formatFileSize = (bytes) => {
  if (!bytes) return '-'
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(1024))
  return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i]
}

// 树形搜索
const filterNode = (value, data) => {
  if (!value) return true
  return data.name.toLowerCase().includes(value.toLowerCase())
}

// 刷新树
const refreshTree = () => {
  loadAreaTree()
  ElMessage.success('区域树已刷新')
}

// 展开所有节点
const expandAll = () => {
  treeRef.value?.store?.nodesMap?.forEach(node => {
    node.expanded = true
  })
}

// 折叠所有节点
const collapseAll = () => {
  treeRef.value?.store?.nodesMap?.forEach(node => {
    node.expanded = false
  })
}

// 更新树节点
const updateTreeNodes = (parentId, children) => {
  const updateNode = (nodes) => {
    for (const node of nodes) {
      if (node.id === parentId) {
        if (!node.children) {
          node.children = []
        }
        node.children = children
        return true
      }
      if (node.children && updateNode(node.children)) {
        return true
      }
    }
    return false
  }
  updateNode(areaTreeData.value)
}

// 关闭对话框处理
const handleCloseVideoDialog = () => {
  videoDialogVisible.value = false
  currentCamera.value = null
  cameraStreams.value = []
}

const handleCloseDetailDialog = () => {
  detailDialogVisible.value = false
  currentCameraDetail.value = null
}

const handleCloseHistoryDialog = () => {
  historyDialogVisible.value = false
  currentCamera.value = null
  historyVideos.value = []
}

// 视频控制函数
const togglePlay = () => {
  isPlaying.value = !isPlaying.value
  ElMessage.info(isPlaying.value ? '开始播放' : '暂停播放')
}

const toggleFullscreen = () => {
  ElMessage.info('全屏功能开发中')
}

const handleSnapshot = () => {
  ElMessage.info('截图功能开发中')
}

const handleFullScreen = () => {
  ElMessage.info('全屏播放功能开发中')
}

const handlePtzControl = (direction) => {
  ElMessage.info(`云台控制: ${direction}`)
}

const handleCameraRowClick = (row) => {
  handleViewDetail(row)
}

const handlePlayHistory = (video) => {
  ElMessage.info(`播放历史视频: ${video.videoId}`)
}

const handleDownloadHistory = (video) => {
  ElMessage.info(`下载历史视频: ${video.videoId}`)
}

// 监听搜索条件变化
watch(treeFilterText, (val) => {
  treeRef.value?.filter(val)
})

watch(filterStatus, () => {
  // 状态筛选变化时自动处理
})
</script>

<style scoped lang="scss">
.page-header {
  margin-bottom: 20px;
  text-align: center;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.page-subtitle {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.main-content {
  display: flex;
  flex: 1;
  gap: 20px;
  min-height: 0;
}

.left-sidebar {
  width: 300px;
  flex-shrink: 0;
}

.right-content {
  flex: 1;
  min-width: 0;
}

.video-item {
  left: 0;
  top: 0;
  aspect-ratio: 16/1;
}

.tree-card,
.camera-list-card,
.empty-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tree-card :deep(.el-card__body),
.camera-list-card :deep(.el-card__body),
.empty-card :deep(.el-card__body) {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tree-search {
  border-bottom: 1px solid #f0f0f0;
}

.tree-container {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.custom-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 0;
}

.node-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-icon {
  color: #409EFF;
  font-size: 16px;
}

.node-label {
  font-size: 14px;
  color: #303133;
}

.node-count {
  font-size: 12px;
  color: #909399;
}

.node-status {
  margin-left: auto;
}

.camera-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
  overflow-y: auto;
}

.camera-card {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: white;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  &.camera-offline {
    opacity: 0.6;
    filter: grayscale(0.5);
  }
}

.camera-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.camera-info {
  flex: 1;
}

.camera-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.camera-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.camera-pos {
  font-size: 12px;
  color: #909399;
}

.camera-actions {
  flex-shrink: 0;
}

.video-container {
  position: relative;
  height: 200px;
  background: #000;
}

.video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #909399;
}

.offline-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

.live-video {
  position: relative;
  height: 100%;
  cursor: pointer;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease;

  .live-video:hover & {
    opacity: 1;
  }
}

.camera-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: #fafafa;
}

.camera-specs {
  display: flex;
  align-items: center;
  gap: 15px;
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
}

.camera-time {
  font-size: 12px;
  color: #909399;
}

.camera-list {
  padding: 0;
}

.camera-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.camera-icon {
  color: #409EFF;
}

.empty-content {
  padding: 60px 0;
  text-align: center;
}

// 视频播放器样式
.video-player-container {
  height: 70vh;
}

.video-player {
  height: 100%;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}

.video-player-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: white;
}

.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid #333;
}

.player-header h3 {
  margin: 0;
  color: white;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.video-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.video-screen {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.live-video-screen {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.video-info-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

.info-item .label {
  color: #ccc;
}

.info-item .value {
  color: white;
}

.video-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: rgba(0, 0, 0, 0.8);
  border-top: 1px solid #333;
}

.control-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.volume-text {
  font-size: 12px;
  color: #ccc;
}

.control-right {
  display: flex;
  gap: 5px;
}

// 详情对话框样式
.camera-detail {
  max-height: 60vh;
  overflow-y: auto;
}

.streams-section {
  margin-top: 20px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 10px 0;
}

// 历史回放样式
.history-playback {
  max-height: 60vh;
  overflow-y: auto;
}

.history-filter {
  padding: 0 0 20px 0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.history-list {
  margin-top: 20px;
}

/* 修复视频项的位置和对齐 */
.video-item-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-item {
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.video-player-element {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #000;
}

/* 调整视频屏幕容器 */
.video-screen {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

/* 确保视频播放器容器正确布局 */
.video-player-container {
  height: 70vh;
  min-height: 400px;
}

.video-player {
  height: 100%;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.video-player-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: white;
}

.video-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* 重要：防止内容溢出 */
}
</style>